<template>
    <view class="page">

        <view class="feedback-body feedback-uploader">
            <view class="uni-uploader">
                <view class="uni-uploader-head">
                    <view class="uni-uploader-title"></view>
                    <view class="uni-uploader-info"></view>
                </view>
                <view class="uni-uploader-body">
                    <view class="uni-uploader__files">
                        <block v-for="(image,index) in imageList" :key="index">
                            <view class="uni-uploader__file" style="position: relative;">
                                <image class="uni-uploader__img" :src="image" @tap="previewImage(index)"></image>
                                <view class="close-view" @click="close(index)">x</view>
                            </view>
                        </block>
                    </view>
                </view>
				<view  class="uni-uploader__input-box" v-if="imageList.length ==0">
				    <view class="uni-uploader__input"  @tap="chooseImg"></view>
				</view>
				
            </view>
        </view>
            <view class="btnline">
					<view class="btnlable">用户邮箱</view>
					<view class="btnres" >
						<input type="text" v-model="email" class="uni-input" focus="true" min="5" max="30" />
					</view>
         	</view>
         	
         	<view class="btnline">
					<view class="btnlable">我的姓名</view>
					<view class="btnres">
						<input type="text" v-model="realName" class="uni-input" focus="true" min="2" max="20"/>
					</view>
         	</view>
			<view class="btnline">
					<view class="btnlable">我的生日</view>
					<view class="btnres">
						<input type="text" v-model="userBirthday" class="uni-input" focus="true"/>
					</view>
			</view>
         	<view class="btnline">
					<view class="btnlable">我的昵称</view>
					<view class="btnres" >
						 <input type="text" v-model="userName" class="uni-input" focus="true" min="2" max="20"/>
					</view>
         	</view>
        <button  class="btn" @click="handleUploadFile()">提交</button>
	   <view class="bottom"></view>
	   <commonUserTabBar :currentTab="currentTab"></commonUserTabBar>
    </view>
</template>
<script>
import global from '@/global.js'

export default {
	components: {
	},
	mounted() {
		//this.departmentId
	},
	data() {
		return {
			msgContents: ["界面显示错乱", "启动缓慢，卡出翔了", "UI无法直视，丑哭了", "偶发性崩溃"],
			stars: [1, 2, 3, 4, 5],
			imageList: [],
			userBirthday:'1988-10-26',
			realName:'赵英飞',
			email:'zhaoyingfei228@126.com',
			userName:'子衿',
			//当前选项卡
			currentTab:'/pages/myMain/personalInformation',
			filePaths:'',
			image:'',
		}
	},
	methods: {
		verifyDate(value) {
		    return !/Invalid|NaN/.test(new Date(value).toString());
		},
		verifyPhone(value) {
		    return /^1[3-9]\d{ 9}$/.test(value);
		},
		verifyEmail(value) { 
		    return /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/.test(value);
		},
		chooseImg(index) { //选择图片
			uni.chooseImage({
				sourceType: ["camera",'album'],
				sizeType: "compressed",
				count: 1 - this.imageList.length,
				success: (res) => {
					this.imageList = this.imageList.concat(res.tempFilePaths);
					console.log('图片路径'+this.imageList)
				//	this.previewImage()
				    uni.getImageInfo({
						src: res.tempFilePaths[0],
						success: function (image) {
							console.log("宽度"+image.width);
							console.log("高度"+image.height);
						}
				});
				}
			});
		},
		previewImage(index) { //预览图片
			uni.previewImage({
				urls: this.imageList,
				current: this.imageList[index]
			});
		},
		handleUploadFile() {
				var token = uni.getStorageSync("token")
				var phone = uni.getStorageSync("phone")
				console.log("caches get token value :  ", token)
				console.log("caches get phone value :  ", phone)
				console.log("this.filePaths  :  ", this.imageList[0])
				
				console.log("emial validator result :  ", this.verifyEmail(this.email))
				console.log("userBirthday validator result :  ", this.verifyDate(this.userBirthday))
				console.log("emial validator result :  ", this.verifyEmail(this.email))
				console.log("emial validator result :  ", this.verifyEmail(this.email))
				
				uni.uploadFile({
					url: global.baseUrl + 'api/register/editUser',
					filePath: this.imageList[0],
					name:'files',
					header: {
						'X-Token': token
					},
					formData: {
						userName: this.userName,
						realName: this.realName,
						email: this.email,
						userBirthday: this.userBirthday,
					},
					success: (res) => {
						uni.showToast({
						   title: '提交成功',
						});
					},
					fail: (res) => {
						uni.showToast({
						   title: '提交失败',
						});
					},
		    })
		},
		initUser(){
			  var token = uni.getStorageSync("token")
			  console.log("caches get  token value :  ", token)
			  uni.request({
				url: global.baseUrl + 'api/register/getUser', // 接口地址
				method: 'get',
				dataType: "json",
				data:{
					collectoonType: 3
				},
				header: {
					'X-Token': token
				},
				success: (res) => {
					if (res.data.code == 0) {
					    this.userName=res.data.data.userName;
					    this.realName=res.data.data.realName;
					    this.email=res.data.data.email;
						this.userBirthday=res.data.data.userBirthday;
						this.imageList[0]=res.data.data.headImage;
					} 
				},
				fail: (error) => {
					console.log(error)
				}
			  })
		}
	},
	onLoad() {
      this.initUser()
	}
}
</script>

<style>
    page {
        background-color: #EFEFF4;
    }
    .input-view {
        font-size: 28rpx;
    }
    .close-view {
        text-align: center;
        line-height: 14px;
        height: 16px;
        width: 16px;
        border-radius: 50%;
        background: #FF5053;
        color: #FFFFFF;
        position: absolute;
        top: -6px;
        right: -4px;
        font-size: 12px;
    }
	.feedback-body {
		background: #fff;
	}
	.feedback-uploader {
		padding: 22rpx 20rpx;
	}
	.uni-uploader {
		flex: 1;
		flex-direction: column;
	}
	.uni-uploader-head {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.uni-uploader-info {
		color: #B2B2B2;
	}
	.uni-uploader-body {
		margin-top: 16rpx;
	}
	.uni-uploader__files {
		margin-top: 30px;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		
	}
	.uni-uploader__file {
		margin-left: 100px;
		width: 300rpx;
		height: 300rpx;
		
	}
	.uni-uploader__img {
		display: block;
		width: 300rpx;
		height: 300rpx;
		
	}
	.uni-uploader__input-box {
		position: relative;
		margin-left: 100px;
		width: 300rpx;
		height: 300rpx;
		border: 2rpx solid #D9D9D9;
	}
	.uni-uploader__input-box:before,
	.uni-uploader__input-box:after {
		content: " ";
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		background-color: #D9D9D9;
	}
	.uni-uploader__input-box:before {
		width: 4rpx;
		height: 79rpx;
	}
	.uni-uploader__input-box:after {
		width: 79rpx;
		height: 4rpx;
	}
	.uni-uploader__input-box:active {
		border-color: #999999;
	}
	.uni-uploader__input-box:active:before,
	.uni-uploader__input-box:active:after {
		background-color: #999999;
	}
	.uni-uploader__input {
		position: absolute;
		z-index: 1;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
	}
	.btnline{
		margin-top: 20rpx;
		height: 80rpx;
		width: 100%;
	}
	.btnline2{
		margin-top: 10rpx;
		height: 870rpx;
		width: 100%;
		
	}
	.btnlable{
		margin-left: 10rpx;
		height: 80rpx;
		font-size: 30rpx;
		width: 26%;
		text-align: center;
		line-height: 80rpx;
		background: #FFFFFF;
		border: solid 1px #F0F0F0;
		border-radius:6px; 
		float: left;
		text-align: center;
	}
	.btnres{
		margin-left: 10rpx;
		height: 80rpx;
		font-size: 30rpx;
		width: 68%;
		text-align: center;
		line-height: 80rpx;
		background: #FFFFFF;
		border: solid 1px #F0F0F0;
		border-radius:16px; 
		float: left;
	}
	.btndate{
		margin-left: 10rpx;
		height: 80rpx;
		font-size: 30rpx;
		width: 40%;
		text-align: center;
		line-height: 80rpx;
		background: #FFFFFF;
		border: solid 1px #F0F0F0;
		border-radius:6px; 
		float: left;
	}
	.btn{
		margin-top: 100rpx;
		margin-left: 8%;
		height: 80rpx;
		font-size: 30rpx;
		width: 84%;
		text-align: center;
		line-height: 80rpx;
		color: #FFFFFF;
		background: #f9624f;
		border: solid 1px #F0F0F0;
		border-radius:6px; 
		float: left;
	}
</style>